<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>eForm example</title>
		<style type="text/css">

*{
font-family:arial, helvetica, sans-serif;
font-size:10pt;
border-width:1px;
border-color:#003399;
}

body{
background-color:#a4d1f9;
}

h1, h2, h3{
margin-bottom:0;
color:#003399;
}

h1{
margin-top:0;
margin-bottom:20px;
font-size:20pt;
text-align:center;
border-bottom-style:solid;
border-color:#e78900;
}

h2{
font-size:12pt;
}

hr{
color:#ffffff;
border-style:none none solid none;
border-color:#e78900;
}

p{
margin-top:0;
}

ul{
margin:0 0 0 10px;
padding:0;
list-style-type:square;
}

code{
font-family:monospace;
color:#666666;
}

a{
color:#e78900;
text-decoration:none;
}

a:hover{
border-bottom-style:dashed;
}

#qe_logo{
float:right;
margin:0 57px 20px 57px;
}

#qe_toc{
width:200px;
margin:0 0 20px 20px;
padding:20px;
float:right;
clear:right;
border-style:solid;
background-color:#eaf9ff;
}

#qe_toc h1{
margin-top:0;
font-size:12pt;
text-align:center;
}

div.qe_box{
margin:30px;
padding:30px;
border-style:solid;
background-color:#ffffff;
}

div.qe_level_2{
margin-left:20px;
margin-right:20px;
}

.qe_salutation{
margin-left:30px;
}

.qe_signature{
font-family:cursive;
font-size:14pt;
}

.qe_param_list li{
	margin:2px;
	color:#333;
}
.qe_param_list li strong{
	color:#036;
	font-size:1.02em
}
.new{ 
	color:#c00;
	font-weight:bold;
}
.codeblock{
	margin:10px 0;
	padding:5px;
	background:#eaeaea;
	border:1px solid #999;
	font-family:monospace;
	white-space: nowrap;
	overflow: auto;
	max-height: 24em;
	clear:right;
}

.qe_param_list li{
	margin:2px;
	color:#333;
}
.qe_param_list li strong{
	color:#036;
	font-size:1.02em
}
.new{ 
	color:#c00;
	font-weight:bold;
}
</style>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function toggleImage(i){
	var obj = document.getElementById(i);
	if(obj){ obj.style.display=(obj.style.display=='none')?'block':'none'; }
}
//-->
</SCRIPT>
</head>

<body>
<div class="qe_box">
<h1>eForm - Examples</h1><img id="qe_logo" src="logo.png" alt="logo" />
	
		<div id="qe_toc">
			<h1>Index</h1>
				<ul>
					<li><a href="eform.htm#top">Main index</a></li>
					<li><a href="eform_examples.htm">Examples</a>
					<ul>
						<li><a href="eform_examples.htm#top">Feedback Form</a></li>
						<li><a href="eform_example_multiple_forms.htm">Multiple forms</a></li>
						<li><a href="eform_example_events.htm">eForm events</a></li>
					</ul>
					</li>
				</ul>
			
		</div>

<div class='qe_level_1'>
<h2>Using eForm's eformOnBeforeMailSent event</h2>
<h3>Prerequisites:</h3>
<ul>
<li>Works with <strong>eForm version 1.4</strong> and later. If you have an earlier version upgrade now at <a href="http://www.modxcms.com/downloads/">www.modxcms.com/downloads/</a></li>
<li>Be familiar with PHP programming, specifically with variable functions and variable references.</li>
</ul>

<p><br />This example/ tutorial will show you how to call an external function using the onBeforeMailSent event and what you can do with such an event.</p>

<p>The scenario is a continuation from our <a href="eform_example_multiple_forms.htm">last example</a>. To fill you in or refresh your memory, we set up a job request form for a translation agency where clients can either type in an article into a text box or attach a text file. A second form in on the same page allowed existing clients to request a progress report, for which they needed a job number. In the example the translation agency would receive an email and would then have to assign a job number and follow up manually.</p>

<p>With eForm we can do better. We're going to extend eForm using it's events structure to provide the jobNumber automatically and have this included in the report which is sent to the office and to the client. Below is a repeat of the original job request form and a slightly enhanced report. The second form from the previous example has been ignored in this example.</p>

<h2>The Job Request Form</h2>
<p><a href="#" onclick="toggleImage('image_1');">View or hide</a> an image of the form.<br />
</p>
<div style="display:none;" id="image_1">
<h3>The form</h3><p><img src="example_2_form_1.gif" width="510" height="553" alt="" border="0" title="" /></p>
<p>Curious how I aligned all the fields? Here's the CSS.</p>
<div class='codeblock'><pre>
&lt;style type=&quot;text/css&quot;&gt;
	p,input,select,legend{ font-size:0.8em; margin:2px; }
	form.eform{ width:35em; margin:0;}
	legend{ font-weight:bold;}
	label{ display:block; clear:left; float:left; width:10em; }
	p.explain{ margin-left:10em; color:#339; }
	input.field,textarea.field{ width:30em;}
&lt;/style&gt;
</pre></div>
</div>

<h3 style="clear:both">The form Template</h3>
<div class='codeblock'>
<pre>
[+validationmessage+]
&lt;form action=&quot;[~[*id*]~]&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;formid&quot; value=&quot;newJob&quot; /&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Your personal details&lt;/legend&gt;
        &lt;p&gt;
            &lt;label&gt;Name&lt;/label&gt;       
            &lt;input class=&quot;field&quot; type=&quot;text&quot; name=&quot;fullName&quot; maxlength=&quot;60&quot; eform=&quot;Your Name:string:1:Your Full Name is required&quot; /&gt;
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Email&lt;/label&gt;       
            &lt;input class=&quot;field&quot; type=&quot;text&quot; name=&quot;email&quot; size=&quot;40&quot; maxlength=&quot;40&quot; eform=&quot;Email Address:email:1&quot; /&gt;
        &lt;/p&gt;
    &lt;/fieldset&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Article Details&lt;/legend&gt;
        &lt;p class=&quot;explain&quot;&gt;You can provide a summary and the main article below or alternatively supply the material
        in an attachment. Currently we support the following formats: Ms Word, Adobe Acrobat (pdf), html or plain text.&lt;/p&gt;
        &lt;p&gt;&lt;label&gt;Summary&lt;/label&gt;
        &lt;textarea class=&quot;field&quot; name=&quot;summary&quot; eform=&quot;Summary:html:1&quot; rows=&quot;3&quot; cols=&quot;30&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
        &lt;p&gt;&lt;label&gt;Article&lt;/label&gt;
        &lt;textarea class=&quot;field&quot; name=&quot;article&quot; eform=&quot;Article:html:1&quot; rows=&quot;10&quot; cols=&quot;30&quot;&gt;&lt;/textarea&gt;&lt;/p&gt;
        &lt;p&gt;&lt;label for=&quot;attachment&quot;&gt;Attachment&lt;/label&gt;       
        &lt;input class=&quot;field&quot; type=&quot;file&quot; name=&quot;attachment&quot; accept=&quot;text/plain,application/msword,application/rtf,application/pdf,text/html&quot; eform=&quot;Attachment:file:0&quot; /&gt;&lt;/p&gt;
    &lt;/fieldset&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Preferences&lt;/legend&gt;
        &lt;p&gt;
            &lt;label&gt;Format&lt;/label&gt;       
            &lt;input type=&quot;radio&quot; name=&quot;format&quot; value=&quot;legal&quot; eform=&quot;Return Format::1&quot; &gt;&amp;nbsp;Legal       
            &lt;input type=&quot;radio&quot; name=&quot;format&quot; value=&quot;formal&quot;&gt;&amp;nbsp;Formal       
            &lt;input type=&quot;radio&quot; name=&quot;format&quot; value=&quot;loose&quot; checked=&quot;checked&quot;&quot;&gt;&amp;nbsp;Informal
        &lt;/p&gt;
        &lt;p&gt;
            &lt;label&gt;Language&lt;/label&gt;
            &lt;select name=&quot;language&quot; eform=&quot;language::1&gt;
                &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                &lt;optgroup label=&quot;English&quot;&gt;
                    &lt;option value=&quot;en-au&quot;&gt;Australian&lt;/option&gt;
                    &lt;option value=&quot;en-gb&quot;&gt;UK English&lt;/option&gt;
                    &lt;option value=&quot;en-us&quot;&gt;US English&lt;/option&gt;
                &lt;/optgroup&gt;
                &lt;optgroup label=&quot;French&quot;&gt;
                    &lt;option value=&quot;fr&quot;&gt;France&lt;/option&gt;
                    &lt;option value=&quot;fr-be&quot;&gt;Belgian French&lt;/option&gt;
                    &lt;option value=&quot;fr-ca&quot;&gt;Canadien French&lt;/option&gt;
                    &lt;option value=&quot;fr-ch&quot;&gt;Swiss French&lt;/option&gt;
                    &lt;option value=&quot;fr-gp&quot;&gt;Guadaloupe French&lt;/option&gt;
                    &lt;option value=&quot;fr-gy&quot;&gt;Guyana French&lt;/option&gt;
                    &lt;option value=&quot;fr-mr&quot;&gt;Martinique French&lt;/option&gt;
                &lt;/optgroup&gt;
            &lt;/select&gt;
        &lt;/p&gt;
        &lt;p class=&quot;explain&quot;&gt;       
            &lt;input type=&quot;submit&quot; name=&quot;frmGo&quot; value=&quot;Send Job&quot; /&gt;
        &lt;/p&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;
</pre>
</div>
<p><strong>Note!</strong> In the above template we use a hidden field for the formid: <code>&lt;input type=&quot;hidden&quot; name=&quot;formid&quot; value=&quot;newJob&quot; /&gt;</code><br />
If you are using eForm 1.4 you can instead use the <strong>id</strong> attribute of the form tag itself and leave out the hidden field: <code> &lt;form id=&quot;newJob&quot; action=&quot;[~[*id*]~]&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;</code>. Either way will work 
</p>

<h3>The (adjusted) Report template</h3>
<div class='codeblock'>
<pre>
&lt;p&gt;Here are the details for &lt;strong&gt;[+subject+]&lt;/strong&gt; with Job Number: &lt;strong&gt;[+jobNumber+]&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Client Name:&lt;/td&gt;&lt;td&gt;[+fullName+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Client Email:&lt;/td&gt; &lt;td&gt;[+email+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Summary:&lt;/td&gt; &lt;td&gt;[+summary+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Article:&lt;/td&gt; &lt;td&gt;[+article+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Attachment:&lt;/td&gt; &lt;td&gt;[+attachment+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Create translation in format:&lt;/td&gt; &lt;td&gt;[+format+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Destination language:&lt;/td&gt; &lt;td&gt;[+language+]&lt;/td&gt;&lt;/tr&gt;
	&lt;tr valign=&quot;top&quot;&gt;&lt;td&gt;Job Number:&lt;/td&gt; &lt;td&gt;[+jobNumber+]&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
</div>

<h2>The eformOnBeforeMailSent and eformOnMailSent events</h2>

<p>We can intercept the flow of eForm using the 2 events eForm exposes via the <code>&eFormOnBeforeMailSent</code> and <code>&eFormOnMailSent</code> parameters. When you set these to a function name eFrom will try to call this function. The events are triggered as follows:</p>
<ul>
<li><strong>eFormOnBeforeMailSent</strong> is called after the form has succesfully been validated but before the report is populated and the email is send.</li>
<li><strong>eFormOnMailSent</strong> is called after the report has been populated and the email is sent but before the thankyou template has been populated.</li>
</ul>

<p><br />The function should accept one parameter, the <code>$fields</code> array. The <code>$fields</code> array contains all the form values and other placeholder content with the field names as the key.
The function should return either a <code><strong>true</strong></code> or <code><strong>false</strong></code> value. Currently when a <code><strong>false</strong></code> is returned eForm will return immediately without outputting the form or any messages however this may change in the future.</p>

<p>It is important that you declare the <code>$fields</code> parameter as a reference inside the function so that you manipulate the original values otherwise the function would be working on a copy of the array and changes you make would be lost once the function exits.<em>(if you're getting confused by now, stop reading this and open the php manual at <a href="http://www.php.net/manual/language.references.php">www.php.net/manual/language.references.php</a></em></p>

<div class='codeblock'>
<pre>//$fields as a reference
function someFunction( <strong>&amp;</strong>$fields ){ ... }</pre>
</div>

<p>Well be adding an extra value instead of changing any form values. We'll write a simple function that creates a job number based on the clients initials and the current date/time and add this to the <code>$fields</code> array under the key 'jobNumber'.  If you look at the report template above you'll notice there's an extra placeholder for this.</p>

<div class='codeblock'><pre>
	//create job number based on initials and current date/time
	function createJobNumber( &amp;$fields ){
		$jobNum = '';
		foreach{ explode(' ',$fields['fullName'],3) as $nm)
			$jobNum .= strtoupper(substr($nm,0,1));
		$jobNum .= date('ymdHi');
		//set extra value in fields array
		$fields['jobNumber']= $jobNum;
		//return succes
		return true;
	}	
</pre></div>

<p>All very well that we've written a function but how do we get it into MODx? I'm sure there's multiple ways of doing that but I've simply created an extra snippet called eFormEvent with the 'createJobNumber' function as the only content. That way it's only loaded when using the form. To make it available to eForm we place a call to this snippet on the same page, just before we call the eForm snippet (It needs to be first as otherwise it's not parsed by the time eFrom needs it).</p>

<p>All that remains is to add the <code>&eformOnBeforeMailSent</code> parameter to the eform snippet call with the function name. To finish this example off here are the eFormEvent snippet and both snippet calls that need to reside on the form page.</p>

<p><strong>NOTE! Just a reminder that this will only work in eFrom version 1.3.1 and above!</strong> In earlier versions the &amp;eformOnBeforeMailSent and &amp;eformOnMailSent parameters were not available! (Although I've made the events work in earlier versions by tweaking eForm a bit I ran into trouble with more then one form on the same page.)</p>

<h3>Snippet eFormEvent</h3>
<div class='codeblock'><pre>
//functions for eForm events
function createJobNumber( &amp;$fields ){
	//rest of function code as above
}
//return empty string
return ''; 
</pre></div>
<h3>The snippet calls</h3>
<div class='codeblock'>
<pre>
	[[eFormEvent]]
	[!eForm? &formid=`newJob` &subject=`New Translation Job` &sendirect=`1` &eformOnBeforeMailSent=`createJobNumber` &tpl=`jobForm` &report=`jobReport` &noemail=`1` &thankyou=`jobReport`!]
</pre>
</div>

<p>Note that I've added the <code>&noemail=`1` &thankyou=`jobReport`</code> parameters. They're not necessary but I use them to see the result in the browser while testing instead of having to wait for emails. Remove them if you want to see the actual generated emails coming into your mailbox.</p>

<p> We could take this approach a lot further offcourse. You could for instance store the information in a database or filter the values but we'll leave that to your own imagination.</p>

<p>Enjoy.</p>

</div>
<hr />
<p ><span class='qe_signature'>Jelle Jager</span><br />
AKA TobyL<br />

</p></div></body>
</html>
